import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Breadcrumb, Card, Layout, Menu } from 'antd';
import { NavLink, Outlet, useNavigate } from 'react-router';
import { menuItems } from './router';
import UpdateManager from './components/UpdateManager';

const { Header, Content, Footer, Sider } = Layout;

// 创建一个新的组件来包含需要使用路由功能的部分
const AppLayout: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();

  // 菜单点击事件处理
  const handleMenuClick: MenuProps['onClick'] = (info) => {
    console.log('点击菜单项:', info);
    // 执行路由跳转
    navigate(info.key);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
            <UpdateManager />
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="demo-logo-vertical" />
        <Menu
          theme="dark"
          defaultSelectedKeys={['/']}
          mode="inline"
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout >
        <Content style={{ maxHeight: 'calc(100vh - 68px)', overflow: 'auto' }}>
          {/* <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} /> */}
          {/* 使用 Outlet 来渲染子路由 */}
          <Outlet />
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          立冬 ©{new Date().getFullYear()} Created by Number
        </Footer>
      </Layout>
    </Layout>
  );
};

export default AppLayout;